import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';

import { useTranslate } from '@/hooks/common-hooks';
import { useFetchAppConf } from '@/hooks/logic-hooks';
import { useNavigateWithFromState } from '@/hooks/route-hook';
import authorizationUtil from '@/utils/authorization-util'; // 假设这个工具在这个路径
import { MessageOutlined } from '@ant-design/icons';
import { Flex, Layout, Radio, Space, theme } from 'antd';
import { useCallback, useMemo } from 'react';
import { useLocation } from 'umi';
import Toolbar from '../right-toolbar';

import styles from './index.less';

const { Header } = Layout;

const RagHeader = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigateWithFromState();
  const { pathname } = useLocation();
  const { t } = useTranslate('header');
  const appConf = useFetchAppConf();

  const role = authorizationUtil.getRole();
  const tagsData = useMemo(() => {
    if (role === 'owner') {
      return [
        {
          path: '/knowledge',
          name: t('knowledgeBase'),
          icon: KnowledgeBaseIcon,
        },
        { path: '/chat', name: t('chat'), icon: MessageOutlined },
        {
          path: '/chat-manager',
          name: t('chat-manager'),
          icon: MessageOutlined,
        },
        { path: '/file', name: t('fileManager'), icon: FileIcon },
      ];
    } else if (role === 'admin') {
      return [
        {
          path: '/knowledge',
          name: t('knowledgeBase'),
          icon: KnowledgeBaseIcon,
        },
        { path: '/chat', name: t('chat'), icon: MessageOutlined },
        {
          path: '/chat-manager',
          name: t('chat-manager'),
          icon: MessageOutlined,
        },
        { path: '/file', name: t('fileManager'), icon: FileIcon },
      ];
    } else {
      return [{ path: '/chat', name: t('chat'), icon: MessageOutlined }];
    }
  }, [role, t]);

  const currentPath = useMemo(() => {
    const exactMatch = tagsData.find((x) => x.path === pathname);
    if (exactMatch) {
      return exactMatch.name;
    }
    return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'chat';
  }, [pathname, tagsData]);

  const handleChange = (path: string) => {
    navigate(path);
  };

  const handleLogoClick = useCallback(() => {
    navigate('/');
  }, [navigate]);

  return (
    <Header
      style={{
        padding: '0 16px',
        background: colorBgContainer,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: '72px',
      }}
    >
      <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
        <img src="/logo.jpg" alt="Logo" className={styles.appIcon} />
        {/* <span className={styles.appName}>{appConf.appName}111111</span> */}
      </Space>
      <Space size={[0, 8]} wrap>
        <Radio.Group
          defaultValue="a"
          buttonStyle="solid"
          className={styles.radioGroup}
          value={currentPath}
        >
          {tagsData.map((item) => (
            <Radio.Button
              value={item.name}
              onClick={() => handleChange(item.path)}
              key={item.name}
            >
              <Flex align="center" gap={8}>
                <item.icon
                  className={styles.radioButtonIcon}
                  stroke={item.name === currentPath ? 'black' : 'white'}
                />
                {item.name}
              </Flex>
            </Radio.Button>
          ))}
        </Radio.Group>
      </Space>
      <Toolbar />
    </Header>
  );
};

export default RagHeader;
